<template>
  <div id="app">
    <div style="position: absolute;top: 0;left: 0;width: 96%;z-index: -100;">
      <vue-particles
          :clickEffect="true"
          :hoverEffect="true"
          :lineLinked="true"
          :lineOpacity="0.7"
          :linesDistance="150"
          :linesWidth="1"
          :moveSpeed="3"
          :particleOpacity="0.7"
          :particleSize="4"
          :particlesNumber="70"
          clickMode="push"
          color="#dedede"
          hoverMode="grab"
          linesColor="#dedede"
          shapeType="circle"
      >
      </vue-particles>
    </div>
    <div id="max">
      <div style="flex: 10"></div>
      <div id="Damgard" class="card"></div>
      <div style="flex: 1"></div>
      <el-card body-style="border: solid 1px #E0E4E8" class="card" shadow="hover">
        <div id="Login">
          <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" class="demo-ruleForm" status-icon>
            <el-form-item>
              <h1 class="title">账户登录</h1>
            </el-form-item>
            <el-form-item
                prop="userPhone">
              <el-input
                  v-model="formLabelAlign.userPhone"
                  placeholder="手机号/邮箱"
                  prefix-icon="el-icon-user">
              </el-input>
            </el-form-item>

            <el-form-item
                prop="userPassword">
              <el-input
                  v-model="formLabelAlign.userPassword"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  show-password
                  type="password"
                  @keyup.enter="loginGo('formLabelAlign')">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked" class="pass">记住密码</el-checkbox>
              <el-button type="text" @click="$router.push('retrieve')">忘记密码</el-button>
            </el-form-item>

            <el-form-item>
              <el-button :loading="loading" style="width: 100%" type="primary" @click="loginGo('formLabelAlign')">登录
              </el-button>
            </el-form-item>

          </el-form>
          <router-link to="/register">
            <div class="font">还没有账户？
              <el-button type="text">立即注册</el-button>
            </div>
          </router-link>
        </div>
      </el-card>
      <div style="flex: 10"></div>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      formLabelAlign: {},
      checked: false,
      rules: {
        userPhone: [{required: true, message: '请输入账号', trigger: 'blur'}],
        userPassword: [{required: true, message: '请输入密码', trigger: 'blur'}],
      }
    }
  },
  created() {
    let token = localStorage.getItem("token");
    if (token != null) {
      this.$axios.post("/user/getuser", {userToken: token}).then((res) => {
        if (res.data.success) {
          this.$notify({
            title: '提示',
            message: '检测到你上次登录，点击登录',
            type: 'success',
            onClick: this.quickLogin,
          });
        }
      })
    }
  },
  mounted() {
    if (this.$cookies.get("userPhone") !== null) {
      this.checked = true;
      this.formLabelAlign.userPhone = this.$cookies.get("userPhone");
      this.formLabelAlign.userPassword = this.$cookies.get("userPassword");
    }
  },
  methods: {
    quickLogin() {
      router.push('/');
      this.$notify.close();
    },
    loginGo(res) {
      this.$refs[res].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$axios.post("/user/login", this.formLabelAlign).then((res) => {
            if (res.data.success) {
              ElMessage.success({
                message: res.data.message,
                type: 'success'
              });
              if (this.checked === true) {
                this.$cookies.set("userPhone", this.formLabelAlign.userPhone);
                this.$cookies.set("userPassword", this.formLabelAlign.userPassword);
              } else {
                this.$cookies.remove("userPhone");
                this.$cookies.remove("userPassword");
              }
              localStorage.setItem('token', res.data.data);
              this.loading = false;
              router.push("/");
            } else {
              ElMessage.warning({
                message: res.data.message,
                type: 'warning'
              });
              this.loading = false;
            }
          })
        }
      })
    }
  },
}
</script>

<style scoped>

#Damgard {
  border-radius: 5px;
  background-image: url("../static/images/login_02.jpeg");
  background-size: cover;
}

#max {
  display: flex;
}

.card {
  text-align: center;
  margin: 12% 0;
  min-width: 600px;
  background: white;
}

#Login {
  position: relative;
  margin: 0 auto;
  width: 50%;
  animation: login 400ms ease-out;
}

@keyframes login {
  from {
    right: 300px;
  }
  to {
    right: 0;
  }
}

.pass {
  padding-right: 100px;
}

.title {
  width: 100px;
  font-size: 24px;
  font-weight: bold;
}

.font {
  text-decoration: none;
  font-size: 14px;
  color: #878787;
}
</style>